import type {
  CreateCrudOptionsProps,
  CreateCrudOptionsRet,
} from '@fast-crud/fast-crud';

import { ref } from 'vue';

import { DefDictApi } from '#/api/devOperation/system/defDict';
import { $t } from '#/locales';
import {
  indexColumn,
  STATE_CONSTANT_DICT,
  transformQuery,
} from '#/plugins/fast-crud/common';

export function createCrudOptions(
  props: CreateCrudOptionsProps,
): CreateCrudOptionsRet {
  const selectedRowKeys = ref<string[]>([]);

  return {
    selectedRowKeys,
    crudOptions: {
      id: 'def_dict',
      form: {
        wrapper: {
          is: 'a-drawer',
          draggable: false,
          size: '50%',
        },
      },
      request: {
        pageRequest: DefDictApi.pageRequest,
        transformQuery: (query) => {
          const tq = transformQuery(query);
          tq.sort = 'createdTime';
          tq.order = 'desc';
          return tq;
        },
      },
      actionbar: {
        buttons: {
          add: { show: false },
        },
      },
      table: {
        striped: true,
        rowKey: 'id',
        rowSelection: {
          type: 'radio',
          selectedRowKeys,
          onChange: (changed: string[]) => {
            selectedRowKeys.value = changed;
          },
        },
      },
      rowHandle: { show: false },
      columns: {
        ...indexColumn(props.crudExpose),
        key: {
          title: $t('devOperation.system.defDict.key'),
          type: 'text',
          search: { show: true },
        },
        name: {
          title: $t('devOperation.system.defDict.name'),
          type: 'text',
          search: { show: true },
        },
        state: {
          title: $t('devOperation.system.defDict.state'),
          type: 'dict-radio',
          dict: STATE_CONSTANT_DICT,
          search: { show: true, component: { mode: 'multiple' } },
          addForm: { value: true },
          column: { width: 100 },
        },
      },
    },
  };
}
